import { effect } from "./effect.js";
import { ref } from "./ref.js";
import { renderer, Types } from "./render.js";

const count = ref(1);

/* 虚拟DOM节点 */
// const vnode = {
//   type: "h1",
//   props: {
//     id: "foo",
//   },
//   children: [
//     {
//       type: "span",
//       children: `${count.value}`,
//     },
//   ],
// };

// const vnode = {
//   type: "h1",
//   props: {
//     id: "foo",
//     class: [
//       "button default",
//       {
//         primary: true,
//         round: true,
//       },
//     ],
//   },
// };

/* 一个元素绑定多个事件 */
// const vnode = {
//   type: "span",
//   children: "虚拟节点一",
//   props: {
//     onMouseEnter() {
//       console.log("鼠标进入");
//     },
//     onMouseLeave() {
//       console.log("鼠标离开");
//     },
//     onClick: () => {
//       alert("虚拟节点一点击事件");
//     },
//   },
// };

/* 一个事件绑定多个处理函数 */
// const vnode = {
//   type: "span",
//   children: "虚拟节点一",
//   props: {
//     onClick: [
//       () => {
//         alert("虚拟节点一点击事件1");
//       },
//       () => {
//         alert("虚拟节点一点击事件2");
//       },
//     ],
//   },
// };

//   /* 事件冒泡 */
// const bol = ref(false);

// effect(() => {
//   const vnode = {
//     type: "div",
//     props: bol.value
//       ? {
//           onClick: () => {
//             alert("div元素绑定的点击事件");
//           },
//         }
//       : {},
//     children: [
//       {
//         type: "span",
//         children: "子节点",
//         props: {
//           onClick: () => {
//             bol.value = true;
//             // alert("span元素绑定的点击事件");
//             console.log(bol.value);
//           },
//         },
//       },
//     ],
//   };
//   /* 渲染 */
//   renderer.render(vnode, document.getElementById("app"));
//   // renderer.render(vnode1, document.getElementById("app"));
// });

// count.value++;

/* 渲染文本节点 */

// const vnode = {
//   type: Types.TEXT,
//   children: "hello world",
// };

// const vnode1 = {
//   type: Types.TEXT,
//   children: "hello world1111",
// };

// const vnode = {
//   type: Types.COMMENT,
//   children: "傻逼邓",
// };

// const vnode1 = {
//   type: Types.COMMENT,
//   children: "傻逼邓1111",
// };

// const vnode = {
//   type: "ul",
//   children: [
//     {
//       type: Types.FRAGEMENT,
//       children: [
//         {
//           type: "li",
//           children: "1",
//         },
//         {
//           type: "li",
//           children: "2",
//         },
//         {
//           type: "li",
//           children: "3",
//         },
//       ],
//     },
//   ],
// };

// const vnode1 = {
//   type: "ul",
//   children: [
//     {
//       type: Types.FRAGEMENT,
//       children: [
//         {
//           type: "li",
//           children: "4",
//         },
//         {
//           type: "li",
//           children: "5",
//         },
//         {
//           type: "li",
//           children: "6",
//         },
//         {
//           type: "li",
//           children: "7",
//         },
//       ],
//     },
//   ],
// };

const vnode = {
  type: "div",
  children: [
    {
      type: "p",
      children: "1",
      key: 1,
    },
    {
      type: "p",
      children: "2",
      key: 2,
    },
    {
      type: "p",
      children: "3",
      key: 3,
    },
  ],
};

// const vnode1 = {
//   type: "div",
//   children: [
//     {
//       type: "p",
//       children: "2",
//       key: 2,
//     },
//     {
//       type: "p",
//       children: "4",
//       key: 4,
//     },
//     {
//       type: "p",
//       children: "1",
//       key: 1,
//     },
//     {
//       type: "p",
//       children: "3",
//       key: 3,
//     },
//   ],
// };

const vnode1 = {
  type: "div",
  children: [
    {
      type: "p",
      children: "3",
      key: 3,
    },
    {
      type: "p",
      children: "1",
      key: 1,
    },
  ],
};

renderer.render(vnode, document.getElementById("app"));
renderer.render(vnode1, document.getElementById("app"));
